<!-- 位置 -->
<template>
    <layout-pane label="位置">
        <template v-if="['album', 'list', 'layout-vessel', 'search'].includes(widgetType)">
            <si-input-number
                v-model="widget.widgetData.eles.style['margin-top']"
                label="距上"
                unit="px"
            />
        </template>

        <template v-else>
            <template v-if="widget.isFreeWidget">
                <si-input-number
                    v-model="widget.widgetData.eles.style.left"
                    label="距左"
                    unit="px"
                />
                <si-input-number
                    v-model="widget.widgetData.eles.style.top"
                    label="距上"
                    unit="px"
                />
            </template>
            <template v-else>
                <si-input-number
                    v-model="widget.widgetData.eles.style['margin-left']"
                    label="距左"
                    unit="px"
                />
                <si-input-number
                    v-model="widget.widgetData.eles.style['margin-top']"
                    label="距上"
                    unit="px"
                />
            </template>
        </template>
    </layout-pane>

    <template v-if="['text', 'button', 'picture', 'video', 'title-ele', 'carousel', 'breakline', 'free-vessel',
                    'popup-window', 'nav-icon', 'static-vessel'].includes(widgetType)
    ">
        <layout-pane label="对齐">
            <si-align
                :type="alignTypes"
                @click="onSetAlign"
            />
        </layout-pane>
    </template>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import useWidgetSetting from '@/libs/edit/widgetSetting'
import usePageHistory from '@/libs/edit/pageHistory'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiInputNumber,
    SiAlign
} from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'RowPosition',
    components: {
        LayoutPane,
        SiInputNumber,
        SiAlign
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const {
            onAlign
        } = useWidgetSetting()

        const {
            onAddPageHistory
        } = usePageHistory()

        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        // 位置对齐列表
        const alignTypes = computed(() => {
            const list = ['left', 'vertical', 'right']
            if (widget.value.isFreeWidget) {
                list.push(...['top', 'horizontal', 'bottom', 'verticalEquidistant', 'horizontalEquidistant'])
            }
            return list
        })
        // 设置控件对齐(left左对齐，vertical水平居中对齐，right右对齐，top顶对齐， horizontal垂直居中对齐，bottom底对齐)
        const onSetAlign = type => {
            onAlign([widget.value.widgetData.eles.id], type)
            onAddPageHistory()
        }

        return {
            widget,
            widgetType,
            alignTypes,

            onSetAlign
        }
    }
})
</script>